<template>
  <div v-loading="loading" class="containers">
    <el-button
      class="back"
      type="primary"
      size="mini"
      @click="back"
    >返回</el-button>
    <el-tabs @tab-click="changeContentType">
      <el-tab-pane label="自动出库">
        <div class="table">
          <el-card>
            <div slot="header" class="clearfix">
              <div class="card_header">
                <span>自动出库</span>
              </div>
            </div>
            <el-form size="small">
              <el-row :gutter="10">
                <el-col :span="5">
                  <el-form-item
                    label="工程号"
                    label-width="90px"
                    prop="workNum"
                  >
                    <el-select
                      v-model.trim="queryInfo_materiel.workNum"
                      clearable
                      filterable
                      no-match-text="1111"
                      placeholder="请输入工程号"
                    >
                      <el-option
                        v-for="(item, index) in workNumOptions"
                        :key="index"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    label="批次号"
                    label-width="90px"
                    prop="processcardCode"
                  >
                    <el-select
                      id="selectInput"
                      ref="searchSelect"
                      v-model.trim="queryInfo_materiel.processcardCode"
                      clearable
                      filterable
                      placeholder="请输入批次号"
                      :filter-method="dataFilter"
                      @visible-change="visibleChange"
                      @focus="selectFocus"
                      @blur="selectBlur"
                      @change="selectChange"
                    >
                      <el-option
                        v-for="(item, index) in ProcesscardCodemOptions"
                        :key="index"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="库区" label-width="90px" prop="zoneCode">
                    <el-select
                      v-model="queryInfo_materiel.zoneCode"
                      clearable
                      filterable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in dict.warehouse"
                        :key="item.id"
                        :label="item.label"
                        :value="item.label"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    @click="getMaterielByCode"
                  >搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
            <div class="left">
              <el-table
                ref="tableMateriel"
                :data="table_materiel"
                :max-height="tableHeight"
              >
                <!-- <el-table-column type="selection" width="55" :selectable="selectRow" /> -->
                <el-table-column prop="workNum" label="工程号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.workNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="processcardCode" label="批次号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.processcardCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="countWithTemperature" label="库内有料温数量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.countWithTemperature }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="库内无料温数量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.count }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="thermometryQty" width="140" label="含料温需求数量">
                  <template slot-scope="scope">
                    <el-input-number
                      :ref="'ref' + scope.$index"
                      v-model.number="scope.row.thermometryQty"
                      :disabled="scope.row.countWithTemperature === 0"
                      :min="0"
                      :max="scope.row.countWithTemperature"
                      :controls="false"
                      size="mini"
                      @input.native="operationScoreChange(scope.row, scope.$index)"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="qty" width="140" label="不含料温需求数量">
                  <template slot-scope="scope">
                    <el-input-number
                      :ref="'ref' + scope.$index"
                      v-model.number="scope.row.qty"
                      :disabled="scope.row.count === 0"
                      :min="0"
                      :max="scope.row.count"
                      :controls="false"
                      size="mini"
                      @input.native="
                        operationScoreChange(scope.row, scope.$index)
                      "
                    />
                  </template>
                </el-table-column>
                <!-- 操作区域 -->
                <el-table-column
                  label="操作"
                  align="center"
                  fixed="right"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      :disabled="(scope.row.qty === 0 &&
                        scope.row.thermometryQty === 0) ||
                        scope.row.qty === '' ||
                        scope.row.thermometryQty === '' ||
                        scope.row.ab === ''"
                      @click="outBoundConfirm(scope.row, 1)"
                    >
                      创建出库单
                    </el-button>
                  </template>
                </el-table-column>
                <div slot="empty" class="empty">
                  <el-empty description="暂无数据" />
                </div>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="手动出库">
        <div class="table">
          <el-card v-for="(item, index) in boxList" :key="index" class="area">
            <div slot="header" class="clearfix">
              <div class="card_header">
                <span>{{ index === 0 ? "A区" : "B区" }}</span>
              </div>
            </div>
            <div class="card_body">
              <div v-for="(item1, index1) in item" :key="index1" class="row">
                <div
                  v-for="(item2, index2) in item1.slice().reverse()"
                  :key="index2"
                  class="floor"
                >
                  <el-popover
                    v-for="item3 in item2.slice().reverse()"
                    :key="item3.id"
                    placement="top-start"
                    trigger="hover"
                    title="储位信息"
                  >
                    <div>
                      <div>储位编码：{{ item3.storageCode }}</div>
                      <div>
                        货位状态：{{
                          item3.locationInventoryStatus === 1 ? "有货" : "无货"
                        }}
                      </div>
                      <div>
                        载盘号: {{ item3.palletId ? item3.palletId : "无" }}
                      </div>
                      <div>
                        是否启用: {{ item3.status === 1 ? "启用" : "禁用" }}
                      </div>

                      <div v-if="item3.processcardCode">
                        批次号: {{ item3.processcardCode }}
                      </div>
                      <div v-if="item3.workNum">
                        工程号: {{ item3.workNum }}
                      </div>
                      <div v-if="item3.layerName">
                        压合层名: {{ item3.layerName }}
                      </div>
                      <div v-if="item3.thermometryFlag !== undefined && item3.thermometryFlag !== null">
                        是否带料温线: {{ item3.thermometryFlag === 0 ? '不带料温线' : '带料温线' }}
                      </div>
                      <div v-if="item3.size1">长度: {{ item3.size1 }}</div>
                      <div v-if="item3.size2">宽度: {{ item3.size2 }}</div>
                      <div v-if="item3.thick">厚度: {{ item3.thick }}</div>
                      <div v-if="item3.qty">数量: {{ item3.qty }}</div>
                    </div>
                    <el-button
                      slot="reference"
                      :type="
                        item3.locationInventoryStatus === 1 ? 'primary' : 'info'
                      "
                      :class="{ 'temp': item3.thermometryFlag === 1 }"
                      :disabled="item3.status === 0"
                      plain
                      size="mini"
                      @click="outBoundConfirm(item3, 2)"
                    >{{ item3.storageCode }}</el-button>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  createOutBoundOrder,
  getManualOutBound,
  getAllWorkNum,
  getAllProcesscardCode
} from '@/api/outbound'
import { searchStockByMaterial } from '@/api/onbound'
export default {
  dicts: ['warehouse'],
  data() {
    return {
      optionsFilter: [],
      ProcesscardCodemOptions: [],
      workNumOptions: [],
      table_materiel: [],
      tableHeight: window.innerHeight * 0.65,
      queryInfo_materiel: {
        processcardCode: null,
        zoneCode: 'A',
        workNum: null,
        query: {}
      },
      boxList: [],
      boxList1: [],
      loading: false
    }
  },
  created() {
    this.getAllWorkNum()
    this.getAllProcesscardCode()
  },
  methods: {
    selectFocus(e) {
      const value = e.target.value
      setTimeout(() => {
        const input = this.$refs.searchSelect.$children[0].$refs.input
        console.log(1, input.value)
        input.value = value
      })
    },
    selectBlur() {
      // console.log('失去')
    },
    selectChange() {},
    visibleChange(val) {
      console.log(val)
      if (!val) {
        const input = this.$refs.searchSelect.$children[0].$refs.input
        input.blur()
      }
    },
    dataFilter(val) {
      this.queryInfo_materiel.processcardCode = val
      // if (val) {
      //   this.ProcesscardCodemOptions = this.optionsFilter.filter((item) => {
      //     if (
      //       item.label.includes(val) ||
      //       item.label.toUpperCase().includes(val.toUpperCase())
      //     ) {
      //       return true;
      //     }
      //   });
      // } else {
      //   this.ProcesscardCodemOptions = this.optionsFilter;
      // }
    },
    // 工程号模糊查询
    getAllWorkNum() {
      getAllWorkNum().then((res) => {
        this.workNumOptions = res
        console.log(this.workNumOptions)
      })
    },
    // 批次号模糊查询
    getAllProcesscardCode() {
      getAllProcesscardCode().then((res) => {
        this.ProcesscardCodemOptions = res
      })
    },
    // 获取储位信息
    boxShow() {
      getManualOutBound().then((res) => {
        this.boxList = res.data.data
      })
    },
    outBoundConfirm(row, type) {
      if (
        row.locationInventoryStatus === undefined ||
        row.locationInventoryStatus === 1
      ) {
        this.$confirm('此操作将确认出库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.createOutBoundOrder(row, type)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    },
    // 根据工程号创建出库单
    createOutBoundOrder(row, type) {
      let a
      if (type === 1) {
        // 自动
        a = {
          parameterType: type,
          workNum: row.workNum,
          processcardCode: row.processcardCode,
          qty: row.qty,
          thermometryQty: row.thermometryQty,
          zoneCode: this.queryInfo_materiel.zoneCode,
          storageId: null
        }
      } else {
        // 手动
        a = {
          parameterType: 2,
          workNum: null,
          qty: null,
          storageId: row.storageId,
          zoneCode: null
        }
      }
      this.loading = true
      createOutBoundOrder(a)
        .then((res) => {
          if (res.meta.code === 200) {
            this.$message.success('创建成功')
            this.$router.push('/outboundManagement/outboundOrder')
          } else {
            this.$message.error(res.meta.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // tab切换事件
    changeContentType(val) {
      const type = val.index
      if (type === '0') {
        this.getMaterielByCode()
      } else if (type === '1') {
        this.boxShow()
      }
    },
    back() {
      this.$router.back()
    },
    operationScoreChange(row, index) {
      this.$forceUpdate()
      row.qty = this.$refs['ref' + index].displayValue
    },

    // 指定物料获取库存
    getMaterielByCode() {
      searchStockByMaterial({
        workNum:
          this.queryInfo_materiel.workNum === ''
            ? null
            : this.queryInfo_materiel.workNum,
        zoneCode: this.queryInfo_materiel.zoneCode,
        processcardCode:
          this.queryInfo_materiel.processcardCode === ''
            ? null
            : this.queryInfo_materiel.processcardCode
      })
        .then((res) => {
          if (res.meta.code === 200) {
            if (res.meta.msg !== undefined) {
              this.$message.info(res.meta.msg)
            }

            // this.total_materiel = res.data.total.inventoryReport
            this.table_materiel = res.data.inventoryReports.map((v) => {
              v.qty = 0
              v.thermometryQty = 0
              return v
            })
          } else {
            this.$message.error(res.meta.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  display: flex;
  // align-items: center;
  height: 100%;
  justify-content: space-between;

  .el-card {
    width: 100%;
    height: 100%;
    margin: 2px;
    padding: 0;

    .card_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #606266;
      font-weight: bolder;
    }
  }

  .area {
    .card_body {
      .row {
        padding: 20px;

        .floor {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 10px 0;
        }
      }
    }
  }
}

.boxList {
  width: 50px;
  margin: 10px;
}

.planWrap {
  width: 440px;
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-table .cell,
.el-table th > .cell {
  white-space: inherit;
  width: auto;
  // overflow: auto;
}

.containers {
  // margin: 20px;
  height: calc(100% - 15px);

  .el-tabs {
    height: 100%;
    margin: 0 15px 15px 15px;
  }

  ::v-deep .el-tabs__content {
    position: inherit;
    height: calc(100% - 55px);
  }

  .el-tab-pane {
    height: 100%;
  }

  .back {
    position: absolute;
    right: 2%;
    top: 8%;
    z-index: 999;
  }
}

.el-button.temp {
  background-color: #e2fad7 !important;
  border: #67c23a 1px solid !important;
  color: #67c23a !important;
}

.el-button.temp:hover {
  background-color: #67c23a !important;
  color: #fff !important;
}

.el-button.temp.is-disabled {
  background-color: #85ce61 !important;
  color: #f0f7e8 !important;
  border-color: #85ce61 !important;
  opacity: 0.5 !important;
}
</style>
